<template>
  <div class="vip_header">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="box">
            <h3>普通会员</h3>
            <p>课享受折扣:9.5折</p>
            <div>已解锁更高级会员</div>
          </div>
        </div>
        <div class="swiper-slide">
            <div class="box">
          <h3>黄铜会员</h3>
          <p>课享受折扣:9.5折</p>
          <div>已解锁更高级会员</div></div>
        </div>
        <div class="swiper-slide">
            <div class="box">
          <h3>白银会员</h3>
          <p>课享受折扣:9.5折</p>
          <div>已解锁更高级会员</div></div>
        </div>
        <div class="swiper-slide">
            <div class="box">
          <h3>黄金会员</h3>
          <p>课享受折扣:9.5折 </p>
          <div>已解锁更高级会员</div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/swiper/swiper.css";
import Swiper from "@/assets/swiper/swiper.js";
export default {
  name: "VipSwiper",
  mounted() {
    new Swiper(".swiper-container", {
      speed: 1500,
    });
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  height: 214px;
  background-color: #232323;
  color: #fff;
}

.swiper-slide {
    //   text-align: center;
    //   font-size: 18px;
    // //   background: #fff;

    //   /* Center slide text vertically */
    //   display: -webkit-box;
    //   display: -ms-flexbox;
    //   display: -webkit-flex;
    //   display: flex;
    //   -webkit-box-pack: center;
    //   -ms-flex-pack: center;
    //   -webkit-justify-content: center;
    //   justify-content: center;
    //   -webkit-box-align: center;
    //   -ms-flex-align: center;
    //   -webkit-align-items: center;
    //   align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
}
.swiper-slide-active,.swiper-slide-duplicate-active{
  transform: scale(1);
}




.box {
    width: 300px;
    margin: 30px auto 0 ;
    h3{
        font-size: 22px;
    }
    p{
        font-size: 16px;
        &::after{
            content: '';
            display: inline-block;
            width: 22px;
            height: 22px;
            // background-color: pink;
            vertical-align: middle;
            margin-left: 8px;
            background: url(../../../assets/icon/user/VIP.svg) no-repeat;
            background-size: 100% 100%;
        }
    }
    div{
        margin-top: 36px;
        font-size: 13px;
        &::before{
            content: '';
            display: inline-block;
            width: 17px;
            height: 17px;
            // background-color: pink;
            vertical-align: middle;
            margin-right: 8px;
            background: url(../../../assets/icon/user/vip_yes.svg) no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>

